<!---@components: AiToolTab: @/views/aitools/components/AiToolTab/index.vue------>
<template>
  <div class="ai-tools-tab w-full">
    <ul class="flex w-full list-none p-0">
      <li
        v-for="(tab, index) in tabs"
        :key="tab.tabKey"
        class="tab-item relative flex h-[40px] min-w-[125px] max-w-[200px] flex-1 cursor-pointer items-center justify-between rounded-[8px] px-[12px] transition-[background] duration-200"
        :class="{ active: activeTab === tab.tabKey }"
        @click="setActive(tab)"
      >
        <!-- 单图标显示 -->
        <div
          v-if="tab.iconType === 'single'"
          class="icon mr-2 flex h-5 w-5 items-center justify-center"
        >
          <span
            :class="tab.iconBgClass"
            class="flex h-full w-full items-center justify-center rounded"
          >
            {{ tab.icon }}
          </span>
        </div>

        <!-- 双图标显示 -->
        <div
          v-else-if="tab.iconType === 'double'"
          class="icon relative mr-2 flex h-5 w-5 items-center justify-center"
        >
          <!-- 第一个图标（背景层） -->
          <span
            :class="tab.icon1BgClass"
            class="absolute left-0 top-0 z-10 flex h-3.5 w-3.5 items-center justify-center rounded text-xs"
          >
            {{ tab.icon1 }}
          </span>
          <!-- 第二个图标（前景层） -->
          <span
            :class="tab.icon2BgClass"
            class="absolute bottom-0 right-0 z-20 flex h-3.5 w-3.5 items-center justify-center rounded text-xs"
          >
            {{ tab.icon2 }}
          </span>
        </div>
        <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{{ tab.name }}</span>
        <button
          v-if="index !== 0"
          class="close-btn ml-[8px] cursor-pointer border-none text-[14px] text-[#666] transition-opacity duration-200"
          @click.stop="removeTab(tab)"
        >
          ✕
        </button>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import type { ToolItem } from '../data.ts'
  import { emitter } from '@/utils/mitt'

  const tabs = ref<ToolItem[]>([
    { id: 0, key: 'ai_tool', tabKey: 'ai_tool', name: 'AI 工具箱', icon: 'ai_tool' }
  ])
  const isByTab = ref(false)

  const activeTab = ref<number | string>(tabs.value[0].tabKey)

  const setActive = (tool: ToolItem) => {
    activeTab.value = tool.tabKey
    emitter.emit('openByTag', true)
    emitter.emit('openAiTool', tool)
  }
  const removeTab = (tool: ToolItem) => {
    const index = tabs.value.findIndex(tab => tab.tabKey === tool.tabKey)

    if (index !== -1) {
      tabs.value.splice(index, 1)

      if (activeTab.value === tool.tabKey) {
        // 优先激活前一个，没有则激活后一个
        if (index > 0) {
          activeTab.value = tabs.value[index - 1].tabKey
          emitter.emit('openByTag', true)
          emitter.emit('openAiTool', tabs.value[index - 1])
        } else if (tabs.value.length > 0) {
          activeTab.value = tabs.value[0].tabKey
          emitter.emit('openByTag', true)
          emitter.emit('openAiTool', tabs.value[0].tabKey)
        } else {
          activeTab.value = '' // 没有 tab 了
        }
      }
    }
  }

  emitter.on('openByTag', flag => {
    isByTab.value = flag
  })

  emitter.on('openAiTool', (tool: ToolItem) => {
    // 先检查是否已存在相同 id 的 tab，避免重复
    // const exists = tabs.value.find((t) => t.id === tool.id)
    // if (exists) {
    //   activeTab.value = tool.id
    //   return
    // }
    if (isByTab.value) return //顶部导航栏打开不push
    if (tabs.value.length >= 10) {
      // 替换最后一个
      tabs.value[tabs.value.length - 1] = tool
      ElMessage.error('工具页打开达到上限，已自动为您替换')
    } else {
      tabs.value.push(tool)
    }
    activeTab.value = tool.tabKey
  })
</script>

<style scoped lang="scss">
  .ai-tools-tab {
    .tab-item {
      background: transparent;

      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }

      &.active {
        background: #ecf5ff;
        color: #409eff;

        .close-btn {
          opacity: 1;
          visibility: visible;
        }
      }
      .close-btn {
        background: transparent;
        opacity: 0;
        visibility: hidden;
      }

      &:hover .close-btn {
        opacity: 1;
        visibility: visible;
      }

      // 竖线
      &:not(:first-child)::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 16px;
        background: rgba(3, 11, 26, 0.06);
      }
      &:hover::before,
      &.active::before {
        content: none;
      }
    }
  }
</style>
